<template>
    <div class="ColorfulPage">
        <div class="HomeTopBox">
            <div class="TopBox">
                <h4 class="homeTitle">青城风光</h4>
                <div class="line"></div>
            </div>
        </div>
        <div class="mainBox">
            <div class="imgBox">
                <div class="itemBox" :key="index">
                    <swiper :options="swiperOption">
                        <swiper-slide class="bannerImg" v-for="(image, index) in swiperList" :key="index">
                            <img style="position:relative;z-index:1" :src="swiperList[index].img" />
                            <div class="CountryName">
                                <p class="imgCountry">茶坪村</p>
                                <p>Tea village</p>
                            </div>
                            <div class="CountryInfo">
                                <span>
                                    茶坪村位于大观镇青城外山中南部，幅员面积3.5平方公里，生态环境优美，村域森林覆盖率达80%以上，水源丰富，气候宜人，  盛产跑山猪跑山鸡、跑山兔，经济作物主要有银杏、桂花。
                                </span>
                            </div>
                        </swiper-slide>
                        <div class="swiper-button-prev" slot="button-prev"></div>
                        <div class="swiper-button-next" slot="button-next"></div>
                    </swiper>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'country',
  data () {
    return {
      imgUrl: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
      index: 0,
      timer: null,
      swiperList: [{
        url: 'javascript:',
        img: require('../../assets/beautiful/beautiful.png'),
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }, {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
      }],
      current: 0,
      swipel: {},
      swiperOption: {
        spaceBetween: 50,
        centeredSlides: true,
        slidesPerView: 1,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        loop: true,
        pagination: {
          el: '.swiper-pagination'
        },
        history: {
          key: 'slide'
        }
      }
    }
  },
  methods: {
    onChange (index) {
      alert(1)
      this.$refs.swipe.swipeTo()
    }
  }
}
</script>

<style scoped lang="scss">
    .ColorfulPage {
        width: 100%;
        height: auto;
        min-height: calc(100vh);
        background: #fff;
        padding-bottom: 1px;
        .clear {
            clear: both;
        }
        .HomeTopBox{
            width: 750px;
            height: 253px;
            padding-top: 125px;
            background: url("../../assets/qingcheng/q1.png") no-repeat;
            background-size: 100% 100%;
            h4{
                font-size: 30px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 2.5px;
                color: #fff;
                margin: 55px auto 10px auto;
                text-align: center;
            }
            .line{
                width: 60px;
                height: 2px;
                background: #fff;
                border-radius: 1px;
                margin:  0 auto;
            }
        }
        .mainBox{
            color: #f0f0f0;
            position: relative;
            height: 1300px;
            .imgBox{
                width: 701px;
                height: 1177px;
                background-color: #5a5a5a;
                border-radius: 5px;
                margin: 40px auto;
                .bannerImg{
                    position: relative;
                    width: 701px;
                    height: 1177px;
                    img{
                        width: 701px;
                        height: 1177px;
                        position: relative;
                        z-index: 1;
                    }
                    p:first-child{
                        font-size: 0.45rem;
                        left: 0.66rem;
                        top: 0.073333rem;
                        color: #fff;
                    }
                    p:last-child{
                        font-size: 0.37rem;
                        position: relative;
                        left: 0.46rem;
                        top: 0.7rem;
                        color: #fff;
                    }
                    .CountryName{
                        position: absolute;
                        top: 7.433333rem;
                        left: 3.266667rem;
                        z-index: 11;
                        border: 1px #fff solid;
                        border-radius: 10px;
                        height: 105px;
                        width: 211px;
                        .imgCountry{
                            position: absolute;
                        }
                    }
                    .CountryInfo{
                        position: absolute;
                        top: 10.433333rem;
                        left: 1.966667rem;
                        z-index: 11;
                        border-radius: 10px;
                        height: 121px;
                        width: 465px;
                        span{
                            color: #fff;
                            font-size: 0.326667rem;
                            line-height: 20px;
                        }
                    }
                }
                .swiper-button-next{
                    width: 14%;
                    margin: 0;
                    background-image:url("../../assets/beautiful/next.png");
                    background-size:auto;
                }
                .swiper-button-prev{
                    width: 14%;
                    margin: 0;
                    background-image:url("../../assets/beautiful/prev.png");
                    background-size:auto;
                }
            }
        }
    }
</style>
